<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="assets/rt-layer.css">
</head>
<body>
  <div class="rt-player"  id="rt-player001"></div><!-- end rt-player -->


  <button onclick="play2()">play live</button>
  <button onclick="stop2()">stop </button>
  <button onclick="play3()">play history</button>
  <button onclick="pause()">pause</button>
  <button onclick="resume()">resume</button>
  <button onclick="fullscreen()">full screen</button>
  <button onclick="resize()">resize</button>
  <script src="static/video/libffmpeg.js"></script>
  <script src="jquery-370.min.js"></script>
  <script src="static/video/fs.js"></script>
  <script src="static/video/pcm-player.js"></script>
  <script src="static/video/webgl.js"></script>
  <script src="static/video/player.js"></script>
  <script src="static/video/md5.min.js"></script>
  

  <script>
    (function(){
      var websocket = null;
      var nsession = null;
      function login(){
		      websocket.send(JSON.stringify({
                        "messageID": 101,
                        "nLength": 11,
                        "nQueue": 1,
                        "nParameter1": 11,
                        "nParameter2": 12,
                        "webstring": "abcefghijk",
                        "szUserName": "taxi",
                        "szUserPassword": "taxi"
                       // "szUserName": "super",
                       // "szUserPassword": "super"
          }))
	   }
		
    var websocketHandler = {
      onmessage:function(evt){
        var response = JSON.parse(evt.data)
         console.info(response)
          switch(response.messageID){
                    case 102 :{
                        // var deviceID =  "1001981";
                        // var deviceID = "90001";
                         //var deviceID = "1000081";
                        var deviceID = "6000023";
                         //var deviceID = "1000089";
                         var channel = 1;
                         var sessionKey = response.nSessionID;
                         var callback = function(){};
                         if(index == 0){
                          player.playLive(deviceID,channel,sessionKey,callback);
                         }else{
                          //18:12:32 - 18:16:06
                          //var startTime = "2023-06-07 18:12:32";
                          //10:21:07 10:25:26
                          var startTime = "2024-10-24 10:32:35";
                          var endTime = "2024-10-24 10:37:54";
                          var offset = 0;
                          //deviceID,channel,sessionKey,startOffset,startTime,endTime,GPSCallback
                          player.playHistory(deviceID,channel,sessionKey,offset,startTime,endTime,null);
                         }
                        //
                        break;
                    }
          }
      }
    };

     function startWebsocket(url,callback){
			websocket = new WebSocket(url);
			websocket.binaryType = 'arraybuffer';

			websocket.onopen = function(evt) {
			    console.info("websocket onopened")
			    login()
			};

			websocket.onerror = function(evt) {
			    console.info("websocket onerror "+evt.data)
			}
			
			websocket.onclose = function(){
				console.info("websocket onclose ")
			}
			websocket.onmessage = callback.onmessage
		}
    //var url ="ws://192.168.1.10:6006";
    //var url ="ws://118.89.61.175:6006";
    const url = "ws://185.206.29.131:6006";
    var player = null;
    /*
    var canvas = document.getElementById("playCanvas");
    var timeTrack = document.getElementById("timeTracker");
    var timeLabel = document.getElementById('currentTime');
    var durationLabel = document.getElementById('totalTime');*/

    
   
    var option = {
      IOnBtnStopEvent:function(data){
        console.info("IOnBtnStopEvent",data);
      },
      url:url,
      width:"900px",
      height:"450px",
      connectionRetryTimes : 3,//-1 : try connection for ever
      connectionRetryDuration : 3000,
      cacheSeconds:3,
      container:document.getElementById("rt-player001"),
    }
    var index = 0;
    player = new Player(option);
    window.play2 = function(){
      index = 0;
      startWebsocket(url,websocketHandler);
    }

    var timeout1 = function(){
      setTimeout(function(){
        if(player.setEncryptedPassword("888888")){
        console.info("password(888888) is correct,start to play");
      }else{
        console.info("password(888888) is incorrect,please try again");
      }
      },3000);
      setTimeout(function(){
        if(player.setEncryptedPassword("168888")){
        console.info("password(168888) is correct,start to play");
      }else{
        console.info("password(168888) is incorrect,please try again");
      }
      },6000);
    }

    player.setOnRequestPasswordListener(function(){
      timeout1();
      /*if(player.setEncryptedPassword("168888")){
        console.info("password(168888) is correct,start to play");
      }else{
        console.info("password(168888) is incorrect,please try again");
      }*/
    });

    window.stop2 = function(){
      player.stop();
    }

    window.play3 = function(){
      index = 1;
      startWebsocket(url,websocketHandler);
    }

    window.pause = function(){
      player.pause();
    }

    window.resume = function(){
      player.resume();
    }

    window.resize = function(){
      player.resize(900,488);
    }

    window.fullscreen = function(){
      player.fullscreen();
    }

    window.cache = function(){
      //
    }

    })(window)

  </script>
</body>
</html>
